<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D转换</title>
    <style>
      body {
        /* 透视写在被观察元素的父盒子上面 */
        perspective: 300px;
      }
      .temp1 {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* translate3d(x,y,z) 里面的xyz是不能省略的，如果没有就写 0 */
        transform: translate3d(400px, 100px, 100px);
      }

      img {
        display: block;
        margin: 100px auto;
        transition: all 1s;
      }
      img:hover {
        /* transform: rotateX(360deg); */
        /* transform: rotateY(180deg); */
        /* transform: rotateZ(180deg); */
        transform: rotate3d(1, 1, 0, 360deg);
      }

      /* transform-style */
      .box {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        transition: all 2s;
        transform-style: preserve-3d;
      }
      .box:hover {
        transform: rotateY(60deg);
      }
      .box div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: pink;
      }
      .box div:last-child {
        background-color: aqua;
        transform: rotateX(60deg);
      }
    </style>
  </head>
  <body>
    <!-- 
      transform:translateZ(100px);注意 translateZ一般用px单位

      3D转换之透视 perspective

      3D旋转之旋转 rotate3d
      transform: rotate3d(x,y,z,deg);沿着自定义轴旋转 deg为角度
      xyz表示旋转的矢量，是标志你是否希望沿着该轴旋转，最后一个标志旋转的角度
      transform: rotate3d(1, 0, 0, 45deg);就是沿着x轴旋转45deg
      transform: rotate3d(1, 1, 0, 45deg);就是沿着对角线旋转45deg
    
      3D呈现 transform-style
        控制子元素是否开启三维立体环境
        transform-style：flat; 子元素不开启3d立体空间 默认的
        transform-style：preserve-3d;子元素开启立体空间
        代码写给父级，但是影响的是子盒子
        这个属性很重要

      backface-visibility 属性
      backface-visibility 属性定义当元素背面向屏幕时是否可见。
      如果在旋转元素不希望看到其背面时，该属性很有用。
      visible	背面是可见的。
      hidden	背面是不可见的。

      transform-Origin属性允许您更改转换元素的位置。
      2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
      transform-origin: x-axis y-axis z-axis;
      x-axis  定义视图被置于 X 轴的何处。可能的值：left 、center 、right 、length  、%
      y-axis  定义视图被置于 Y 轴的何处。可能的值：top 、center 、bottom 、length 、%
      z-axis  定义视图被置于 Z 轴的何处。可能的值：length
    -->

    <!-- <div class="temp1"></div> -->

    <!-- <img src="../image/pig.jpg" alt="" /> -->

    <div class="box">
      <div></div>
      <div></div>
    </div>

    <div class="test"></div>
  </body>
</html>
